<template>
  <div class="screeningSituation" id="screeningSituation">
    <el-row :gutter="20">
      <el-col
        :span="8"
        :xs="24"
        style="margin-bottom: 6px"
        v-for="item in grid"
        :key="item.field"
      >
        <div class="grid-content">
          <div class="label">{{ item.label }}</div>
          <el-divider direction="vertical"></el-divider>
          <div class="value">{{ item.value }} (份)</div>
        </div>
      </el-col>
    </el-row>
    <el-form :model="ruleform" inline class="form">
      <el-form-item label="项目类型：">
        <el-select
          v-model="ruleform.projectName"
          placeholder="请选择"
          style="width: 200px"
          multiple
        >
          <el-option
            v-for="(item, index) in typeList"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="项目点名称：">
        <!-- <el-cascader
          ref="projectPoint"
          v-model="ruleform.organName"
          :props="hosProps"
          filterable
        /> -->
        <el-select
          v-model="ruleform.organName"
          placeholder="请选择"
          style="width: 200px"
          multiple
          filterable
        >
          <el-option
            v-for="(item, index) in organNameList"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="报告时间：">
        <el-date-picker
          v-model="reportTime"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          style="width: 100%"
          @change="onDaterangeChange"
        />
      </el-form-item>
      <el-form-item label="年龄区间：">
        <div class="age">
          <el-select
            v-model="ruleform.ageScopeStart"
            placeholder="起始年龄"
            style="width: 120px"
          >
            <el-option
              v-for="(item, index) in 13"
              :key="index"
              :label="index * 10"
              :value="index * 10"
              :disabled="ruleform.ageScopeEnd < index * 10"
            />
          </el-select>
          -
          <el-select
            v-model="ruleform.ageScopeEnd"
            placeholder="结束年龄"
            style="width: 120px"
          >
            <el-option
              v-for="(item, index) in 13"
              :key="index"
              :label="index * 10"
              :value="index * 10"
              :disabled="ruleform.ageScopeStart > index * 10"
            />
          </el-select>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search"
          ><el-icon style="margin-right: 6px"><Search /></el-icon>
          搜索</el-button
        >
        <el-button @click="reset"
          ><el-icon style="margin-right: 6px"><Refresh /></el-icon>
          重置</el-button
        >
        <el-button @click="onPrint" :disabled="disabled">
          <img
            style="margin-right: 6px; width: 12px"
            src="@/images/daochu.png"
            alt=""
          />

          导出</el-button
        >
      </el-form-item>
    </el-form>
    <div class="title card">筛查对象分析</div>
    <div class="card">
      <el-row :gutter="10">
        <el-col :span="12" :xs="24">
          <div class="chart">
            <PieChart
              id="pieChart1"
              :dataList="patientAge"
              title="年龄段分布"
            />
          </div>
        </el-col>
        <el-col :span="12" :xs="24">
          <div class="chart">
            <PieChart
              id="pieChart2"
              :dataList="patientSex"
              title="性别分布"
              :color="['#4680E9', '#5AD0FC', '#AEDEFB']"
            />
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="title card">筛查结果分析</div>
    <div class="card">
      <div class="title">概览</div>
      <el-row :gutter="10">
        <el-col :span="12" :xs="24">
          <div class="chart">
            <PieChart
              id="pieChart3"
              :dataList="inspectionResult"
              title="检验结果分布"
              :color="['#4680E9', '#5AD0FC', '#AEDEFB', '#A449B2']"
            />
          </div>
        </el-col>
        <el-col :span="12" :xs="24">
          <div class="chart">
            <PieChart
              id="pieChart4"
              :dataList="resultAbnormal"
              title="阳性结果分布"
              :color="['#4680E9', '#5AD0FC']"
            />
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="card">
      <BarChart
        id="barChart5"
        :dataList="resultAge"
        title="各年龄段检验结果分布"
      />
    </div>
    <div class="card">
      <BarChart
        id="barChart6"
        :dataList="resultSex"
        title="不同性别检验结果分布"
      />
    </div>
  </div>
</template>

<script>
import { getSubIns } from "@/apis/hospitalManagement";
import { htmlToPDF } from "@/utils/htmlToPdf.js";
import {
  getOverall,
  getPatientAgeQty,
  getPatientSexQty,
  getResultQty,
  getResultAbnormalQty,
  getAgeResultQty,
  getSexResultQty,
  getUserOrganNameList,
  getUserProjectNameList,
} from "@/apis/reportStatistics";
import areaData from "@/utils/area_value";
import format from "@/utils/format";
import { ElMessage } from "element-plus";
import PieChart from "./pieChart";
import BarChart from "./barChart";
import moment from "moment";

export default {
  components: { PieChart, BarChart },
  data() {
    return {
      fullscreenLoading: false,
      disabled: false,
      grid: [
        {
          label: "今日报告量",
          value: 0,
          field: "todayQty",
        },
        {
          label: "本月报告量",
          value: 0,
          field: "thisMonthQty",
        },
        {
          label: "本年报告量",
          value: 0,
          field: "thisYearQty",
        },
      ],
      reportTime: [
        moment().subtract(6, "days").format("YYYY-MM-DD"),
        moment().format("YYYY-MM-DD"),
      ],
      ruleform: {
        projectType: [],
        organName: [],
        reportStartTime: moment().subtract(6, "days").format("YYYY-MM-DD"),
        reportEndTime: moment().format("YYYY-MM-DD"),
      },
      typeList: [
        // {
        //   label: "心血管",
        //   value: "心血管",
        // },
        // {
        //   label: "脑卒中",
        //   value: "脑卒中",
        // },
        // {
        //   label: "脑卒中门诊",
        //   value: "脑卒中门诊",
        // },
        // {
        //   label: "村医",
        //   value: "村医",
        // },
        // {
        //   label: "慧医",
        //   value: "慧医",
        // },
        // {
        //   label: "筛查",
        //   value: "高济",
        // },
        // {
        //   label: "国药爱心",
        //   value: "国药爱心",
        // },
        // {
        //   label: "新疆百草堂",
        //   value: "新疆百草堂",
        // },
        // {
        //   label: "心血管研究院",
        //   value: "心血管研究院",
        // },
      ],
      hosProps: {
        lazy: true,
        checkStrictly: true,
        multiple: true,
        label: "insname",
        value: "inscode",
        lazyLoad: (node, resolve) => {
          this.getJunior(node, resolve);
        },
      },
      patientAge: [],
      patientSex: [],
      inspectionResult: [],
      resultAbnormal: [],
      resultAge: [],
      resultSex: [],
      organNameList: [],
    };
  },
  mounted() {
    this.getUserOrganName();
    this.getUserProjectName();
    this.getAllData();
  },
  methods: {
    getAllData() {
      const params = {
        ...this.ruleform,
        projectName: this.ruleform.projectName.join(","),
        organName: this.ruleform.organName.join(","),
        uname: this.$store.getters.name,
      };
      this.disabled = true;
      Promise.all([
        this.getOveralls({
          projectName: this.ruleform.projectName.join(","),
          organName: this.ruleform.organName.join(","),
          uname: this.$store.getters.name,
        }),
        this.getPatientAgeQty(params),
        this.getPatientSexQty(params),
        this.getResultQty(params),
        this.getResultAbnormalQty(params),
        this.getAgeResultQty(params),
        this.getSexResultQty(params),
      ]).then(() => {
        setTimeout(() => {
          this.disabled = false;
        }, 2000);
      });
    },
    getUserOrganName() {
      getUserOrganNameList({
        uname: this.$store.getters.name,
      }).then((result) => {
        this.organNameList = result.data;
      });
    },
    getUserProjectName() {
      getUserProjectNameList(this.$store.getters.name).then((result) => {
        this.typeList = result.data;
      });
    },
    getJunior(node, resolve) {
      let subins = "";
      if (node.value) {
        subins = node.value;
      }

      getSubIns({
        uname: this.$store.getters.name,
        inscode: this.$store.getters.inscode,
        subins: subins,
      }).then((res) => {
        if (res.code == 0) {
          if (res.data && res.data.length > 0) {
            resolve(res.data);
          } else {
            resolve([]);
          }
        } else {
          resolve([]);
        }
      });
    },
    async getOveralls(params) {
      const result = await getOverall({
        ...params,
      });
      if (!result.data) return;
      this.grid.map((item) => {
        item.value = result.data[item.field];
      });
    },
    async getPatientAgeQty(params) {
      const result = await getPatientAgeQty({
        ...params,
      });
      if (!result.data) return;
      this.patientAge = result.data.patientAge.map((item) => {
        return {
          ...item,
          value: item.qty,
        };
      });
    },
    async getPatientSexQty(params) {
      const result = await getPatientSexQty({
        ...params,
      });
      if (!result.data) return;
      this.patientSex = result.data.patientSex.map((item) => {
        return {
          ...item,
          value: item.qty,
        };
      });
    },
    async getResultQty(params) {
      const result = await getResultQty({
        ...params,
      });
      if (!result.data) return;
      this.inspectionResult = result.data.result.map((item) => {
        return {
          ...item,
          value: item.qty,
        };
      });
    },
    async getResultAbnormalQty(params) {
      const result = await getResultAbnormalQty({
        ...params,
      });
      if (!result.data) return;
      this.resultAbnormal = result.data.resultAbnormal.map((item) => {
        return {
          ...item,
          value: item.qty,
        };
      });
    },
    async getAgeResultQty(params) {
      const result = await getAgeResultQty({
        ...params,
      });
      if (!result.data) return;
      this.resultAge = result.data.resultAge;
    },
    async getSexResultQty(params) {
      const result = await getSexResultQty({
        ...params,
      });
      if (!result.data) return;
      this.resultSex = result.data.resultSex;
    },

    // 搜索
    search() {
      this.getAllData();
    },
    // 重置
    reset() {
      Object.keys(this.ruleform).forEach((key) => {
        if (["organName", "reportTime", "projectName"].includes(key)) {
          this.ruleform[key] = [];
          this.reportTime = [];
        } else {
          this.ruleform[key] = "";
        }
      });
      this.getAllData();
    },
    onDaterangeChange(date) {
      if (date) {
        this.ruleform.reportStartTime = date[0];
        this.ruleform.reportEndTime = date[1];
      } else {
        this.ruleform.reportStartTime = "";
        this.ruleform.reportEndTime = "";
      }
    },
    onPrint() {
      htmlToPDF("screeningSituation", "筛查情况");
    },
  },
};
</script>

<style lang="less" scoped>
.screeningSituation {
  background-color: #eee;
  .grid-content {
    padding: 30px;
    background: #6ebee1;
    display: flex;
    align-items: center;
    border-radius: 6px;
    color: #fff;
    font-size: 20px;
  }
  .form {
    margin: 10px 0;
    background: #fff;
    padding: 20px 10px 10px 10px;
    border-radius: 6px;
  }
  .title {
    font-size: 18px;
    font-weight: 700;
  }
  .card {
    background: #fff;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 10px;
  }
  .chart {
    width: 100%;
    height: 300px;
  }
}
</style>